<template>
  <!-- 物流单评价 -->
  <div class="logistic_list_evaluation">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="快递单评价"
      right-text="提交"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="submit"
    />

    <!-- 总体评分 -->
    <div class="totality">
      <div class="totality_top">总体评分</div>
      <div class="totality_centre">
        <span>{{ value * 2 }}</span>
        分
      </div>
      <div class="totality_bottom">
        <van-rate
          v-model="value"
          :icon="icon1"
          :void-icon="icon2"
          size="35px"
          gutter="28px"
          readonly
        />
      </div>
    </div>

    <!-- 各项评分 -->
    <div class="score">
      <ul>
        <li>店铺评分</li>
        <!-- 店铺评分 -->
        <li>
          <van-row>
            <van-col span="10">店铺评分</van-col>
            <van-col span="14">
              <van-rate
                v-model="val1"
                :size="25"
                color="#ffd15f"
                void-icon="star"
                void-color="#eee"
                @change="value = Math.floor((val1 + val2 + val3) / 3)"
              />
            </van-col>
          </van-row>
        </li>
        <!-- 物流速度 -->
        <li>
          <van-row>
            <van-col span="10">物流速度</van-col>
            <van-col span="14">
              <van-rate
                v-model="val2"
                :size="25"
                color="#fe8e5b"
                void-icon="star"
                void-color="#eee"
                @change="value = Math.floor((val1 + val2 + val3) / 3)"
              />
            </van-col>
          </van-row>
        </li>
        <!-- 快递评分 -->
        <li>
          <van-row>
            <van-col span="10">快递评分</van-col>
            <van-col span="14">
              <van-rate
                v-model="val3"
                :size="25"
                color="#fd5d5e"
                void-icon="star"
                void-color="#eee"
                @change="value = Math.floor((val1 + val2 + val3) / 3)"
              />
            </van-col>
          </van-row>
        </li>
      </ul>
    </div>

    <!-- 输入框 -->
    <div class="input_box">
      <van-field
        class="shurk"
        v-model="inputBox"
        rows="1"
        :autosize="{
          maxHeight: 200,
          minHeight: 200,
        }"
        type="textarea"
        placeholder="写几句评价"
        :border="false"
      />

      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { CommentSubmit } from "@/request/api";
export default {
  data() {
    return {
      // 总体评分
      value: 4,
      // 总体评分-选中
      icon1: require("../assets/xiaolian.png"),
      // 总体评分-未选中
      icon2: require("../assets/shangxin.png"),

      // 店铺评分
      val1: 5,
      // 物流速度
      val2: 3,
      // 快递评分
      val3: 2,

      // 评论
      inputBox: "",
      // 文件上传
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      // 接受数据
      information: [],
    };
  },
  created() {
    this.information = JSON.parse(this.$route.query.info);
    this.value = Math.floor((this.val1 + this.val2 + this.val3) / 3);
  },
  methods: {
    submit() {
      CommentSubmit({
        shop: Number(this.val1),
        logistics: Number(this.val2),
        express: Number(this.val3),
        totalScore: Number(this.value),
        orderCode: String(this.information.orderCode),
        id: String(this.information.id),
        info: String(this.inputBox),
      }).then((res) => {
        // console.log(res);
      });
      // 提示并跳转
      this.$toast.success("提交成功");
      setTimeout(() => {
        this.$router.push("/logisticsBill");
      }, 1000);
    },
  },
};
</script>
<style lang = "less" scoped>
.logistic_list_evaluation {
  /* 顶部导航 */

  .van-hairline--bottom {
    background-color: #003399;
  }

  /deep/.van-nav-bar__title,
  /deep/.van-icon,
  /deep/.van-nav-bar__text {
    color: #ffffff;
  }
  /* 总体评分 */
  .totality {
    background-color: #fff;
    padding-top: 0.15rem;
    padding-bottom: 0.2rem;
    .totality_top {
      text-align: center;
      font-size: 0.16rem;
      color: #aaaaaa;
    }
    .totality_centre {
      padding-top: 0.15rem;
      padding-bottom: 0.1rem;
      text-align: center;
      color: #ffcf41;
      span {
        font-size: 0.4rem;
      }
    }
    .totality_bottom {
      text-align: center;
    }
  }
  .score {
    padding: 0.1rem 20% 0.1rem 10%;
    background-color: #fff;
    margin-bottom: 0.2rem;

    li {
      border-radius: 0.05rem;
      line-height: 0.4rem;
      display: flex;
      justify-content: space-between;
      color: #333333;
    }
    .van-row {
      width: 100%;
    }
    /deep/.van-col {
      text-align: center;
    }
    .van-rate {
      vertical-align: middle;
    }
  }
}
</style>